<template>
	<el-container>
		<el-header>
			<p class="title">大学英语四级听力练习系统</p>
			<el-menu
				:default-active="$route.path"
				:router="true"
				mode="horizontal"
				background-color="#545c64"
				text-color="#fff"
				active-text-color="#ffd04b"
			>
				<el-menu-item index="/user/home">首页</el-menu-item>
				<el-menu-item index="/user/papers">试卷列表</el-menu-item>
				<el-menu-item index="/user/score">我的成绩</el-menu-item>
				<el-menu-item index="/user/collect">我的收藏</el-menu-item>
				<el-submenu index="person">
					<template slot="title">个人中心</template>
					<el-menu-item @click="dialogVisible = true">我的资料</el-menu-item>
					<el-menu-item @click="$store.dispatch('Logout')">退出</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-header>
		<el-main>
			<el-carousel indicator-position="outside" v-show="$route.path == '/user/home'">
				<el-carousel-item v-for="index in 4" :key="index">
					<img :class="`banner-${index}`" />
				</el-carousel-item>
			</el-carousel>
			<router-view />
		</el-main>
		<el-footer v-show="$route.path == '/user/home'">欢迎使用大学英语四级听力练习系统</el-footer>
		<el-dialog
			v-show="dialogVisible"
			:close-on-click-modal="false"
			title="我的资料"
			:visible.sync="dialogVisible"
			width="40%"
		>
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="头像：">
					<el-upload
						class="avatar-uploader"
						action="https://jsonplaceholder.typicode.com/posts/"
						:http-request="upFile"
						:show-file-list="false"
					>
						<img v-if="form.avatarUrl" :src="$baseUrl + form.avatarUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>

				<el-form-item label="用户名：" prop="nickName">
					<el-input v-model="form.nickName"></el-input>
				</el-form-item>
				<el-form-item label="性别：" prop="gender">
					<el-select v-model="form.gender" placeholder="请选择">
						<el-option label="男" value="1"> </el-option>
						<el-option label="女" value="2"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="地区：" prop="address">
					<el-cascader v-model="form.address" :options="options" placeholder=""></el-cascader>
				</el-form-item>
				<el-form-item label="电话：" prop="telNumber">
					<el-input v-model="form.telNumber"></el-input>
				</el-form-item>
				<el-form-item label="密码：" prop="password">
					<el-input v-model="form.password" :type="flag ? 'text' : 'password'" auto-complete="off">
						<i
							slot="suffix"
							:class="flag ? 'el-icon-minus' : 'el-icon-view'"
							style="margin-top: 16px; font-size: 18px"
							autocomplete="auto"
							@click="flag = !flag"
						/>
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</el-container>
</template>
<script>
	import options from '@/utils/city';
	import { upFile } from '@/api/login';
	import { upUser } from '@/api/admin';
	export default {
		data() {
			return {
				dialogVisible: false,
				form: {},
				flag: false,
				options,
				rules: {
					nickName: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
					gender: [{ required: true, trigger: 'change', message: '请选择性别' }],
					address: [{ required: true, trigger: 'change', message: '请选择地区' }],
					telNumber: [
						{
							required: true,
							validator: (rule, value, callback) => {
								let reg = /^1[345789]\d{9}$/;
								if (!reg.test(value)) {
									callback(new Error('请确认手机号格式正确'));
								} else {
									callback();
								}
							},
						},
					],
					password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
					confirmPassword: [
						{
							required: true,
							validator: (rule, value, callback) => {
								if (!value) {
									callback(new Error('请再次输入您的密码'));
								}
								if (value !== this.loginForm.password) {
									callback(new Error('请确认二次输入密码正确'));
								}
								callback();
							},
							trigger: 'blur',
						},
					],
				},
			};
		},
		created() {
			this.form = {
				...this.$store.getters.userInfo,
				address: this.$store.getters.userInfo.address.split('/'),
			};
		},
		methods: {
			async submit() {
				let params = {
					...this.form,
					address: this.form.address.join('/'),
				};
				let valid = false;
				this.$refs['form'].validate((v) => (valid = v));
				if (!valid) return;
				let res = await upUser(params);
				this.$modal.msgSuccess(res.data.msg);
				this.dialogVisible = false;
			},
			async upFile({ file }) {
				let params = new FormData();
				params.append('upFile', file);
				let res = await upFile(params);
				this.$set(this.form, 'avatarUrl', res.data.data.audioPath);
			},
		},
	};
</script>
<style lang="scss" scoped>
	.el-container {
		width: 100%;
		height: 100%;
		.el-header {
			height: auto !important;
			background: rgb(84, 92, 100);
			padding: 15px 0;
			.title {
				text-align: center;
				color: #fff;
				font-size: 24px;
				font-weight: 700;
			}
			.el-menu {
				margin: 0 auto;
				margin-top: 10px;
				width: 480px;
				border-bottom: none;
			}
		}
		.el-main {
			padding: 0;
			flex: 1;
			::v-deep .el-carousel__container {
				height: 350px;
			}
			@for $i from 0 through 4 {
				.banner-#{$i} {
					width: 100%;
					height: 100%;
					object-fit: cover;
					content: url('@/assets/images/banner/#{$i}.png');
				}
			}
		}
		.el-footer {
			line-height: 60px;
			text-align: center;
			color: #fff;
			font-size: 24px;
			font-weight: 700;
			background: rgb(84, 92, 100);
		}
	}
	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50px;
	}
</style>
